<template>
    <div class="overtime-page">
        <!-- Header组件 -->
        <Header :title="$route.params.id == 0 ? '办公室加班申请表': '办公室休假申请表'" theme="light">
            <template v-slot:left>
                <span class="iconfont icon-fanhui" @click="$router.push('/home')"></span>
            </template>
        </Header>

        <!-- 用户信息 -->
        <div class="user">
            <div class="pic">
                <img :src="user.pic" alt="">
            </div>
            <div class="text">
                <div><span>申请人姓名 </span> <span>{{user.name}}</span></div>
                <div><span>直接主管 </span> <span>{{user.leader}}</span></div>
            </div>
        </div>

        <!-- 加班申请表 -->
        <div class="form">
            <div class="title">申请信息</div>
            <div class="block">
                <div>{{$route.params.id == 0 ? '加班日期':'休假日期'}}<span>*</span></div>
                <div><input type="text" :placeholder="$route.params.id == 0 ? '选择加班日期': '选择休假日期'" v-model="date" @click="$refs.date.open()"></div>
            </div>
            <div class="block">
                <div>{{$route.params.id == 0 ? '加班开始时间':'休假开始时间'}}<span>*</span></div>
                <div><input type="text" :placeholder="$route.params.id == 0 ? '加班开始时间': '休假开始时间'" v-model="starttime" @click="$refs.starttime.open()"></div>
            </div>
            <div class="block">
                <div>{{$route.params.id == 0 ? '加班截止时间':'休假截止时间'}}<span>*</span></div>
                <div><input type="text" :placeholder="$route.params.id == 0 ? '加班截止时间': '休假截止时间'" v-model="endtime" @click="$refs.endtime.open()"></div>
            </div>
            <div class="block">
                <div>共计时数</div>
                <div>{{hours}}</div>
            </div>

            <div class="block">
                <div>{{$route.params.id == 0 ? '加班事由':'休假事由'}}</div>
                <div><input type="text" :placeholder="$route.params.id == 0 ? '加班事由': '休假事由'" v-model="desc"></div>
            </div>
            
        </div>
        
        <!-- 按钮 -->
        <div class="btns">
            <div class="btn" @click="$router.push('/home')">取消</div>
            <div class="btn submit" @click="submit">提交</div>
        </div>
        <mt-datetime-picker ref="date"  @confirm="getDate"></mt-datetime-picker>
        <mt-datetime-picker ref="starttime"  @confirm="getStarttime"></mt-datetime-picker>
        <mt-datetime-picker ref="endtime"  @confirm="getEndtime"></mt-datetime-picker>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'

export default {
    data(){
        return {
            type: parseInt( this.$route.params.id  ),//任务的类型(默认是 '加班')  0 表示加班, 1 表示 休假
            status: 0,//任务的状态(默认是 待处理) 0 表示待处理, 1 表示 已发起 2 表示 已处理
            desc:'',//加班理由
            date:'',
            starttime:  new Date().getFullYear()+'-' + (new Date().getMonth()+1) +'-'+new Date().getDate()+' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(),
            endtime: new Date().getFullYear()+'-' + (new Date().getMonth()+1) +'-'+new Date().getDate()+' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(),
            
        }
    },
    computed:{
        ...mapState(['user']),
        hours:function(){//计算并保存加班小时数
            return Math.floor( (new Date(this.endtime)-new Date(this.starttime))/(60*60*1000) ) ;
        }
    },
    methods:{
        ...mapMutations(['saveTask']),
        submit(){//提交表单
            this.$data.user = this.user;
            this.saveTask( this.$data );
            this.$router.push("/home");
        },
        getDate(date){
            
            this.date =  date.getFullYear()+'-' + (date.getMonth()+1) +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
            
        },
        /* 注意: 选择时间时,必须保证 截止时间大于开始时间 */
        getStarttime(date){
            console.log(new Date(this.endtime) - date);
            
            if(new Date(this.endtime) - date > 0)
            this.starttime =  date.getFullYear()+'-' + (date.getMonth()+1) +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
            
        },
        getEndtime(date){
            if(date - new Date( this.starttime ) > 0)
            this.endtime =  date.getFullYear()+'-' + (date.getMonth()+1) +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
            
        }
    }
}
</script>
<style scoped>
.user{
    padding: 40px 20px ;
    display: flex;
    font-size: 14px;
    align-items: flex-start;
    background-color: green;
    color: white;
    border-radius:0 0 20px 20px;
}
.user .pic{
    width: 50px;
    margin-right: 20px;
}
.user .pic img{
    width: 100%;
    border-radius: 50%;
}
.user .text{
    line-height: 20px;
    flex: 1;
}
.form{
    background-color: white;
    padding: 20px 15px;
    margin: 0 20px;
    position: relative;
    top: -30px;
    border-radius: 10px;
}
.block{
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.block span{
    color: red;
}
.block input{
    padding-left: 20px;
    outline: none;
    height: 30px;
    border: 1px solid #f5f5f5;
}

.btns{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: white;
}
.btns .btn{
    flex: 1;
    text-align: center;
}
.btns .btn.submit{
    background-color: green;
    color: white;
}
</style>